<!-- pages/login/login.vue -->
<template>
	<view class="container">
		<view>
			<image src="/static/icon_login_bg@2x.png" class="login_bg" />
		</view>
		<view class="login-container">
			<!-- 登录方式切换 -->
			<view class="tab-bar">
				<text :class="['tab-item', loginType === 'code' ? 'active' : '']"
					@click="switchLoginType('code')">验证码登录</text>
				<text :class="['tab-item', loginType === 'password' ? 'active' : '']"
					@click="switchLoginType('password')">密码登录</text>
			</view>

			<!-- 公共手机号输入 -->
			<view class="input-group">
				<input type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" />
				<text v-if="phoneError" class="error-msg">{{ phoneError }}</text>
			</view>

			<!-- 动态登录区域 -->
			<view v-if="loginType === 'code'" class="input-group">
				<input type="number" v-model="code" placeholder="请输入6位验证码" maxlength="6" />
				<text :class="['get-code-btn', canGetCode ? '' : 'disabled']"
					@click="getSMSCode">{{ codeBtnText }}</text>
			</view>

			<view v-else class="input-group">
				<input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入密码（6-20位字符）" />
				<text class="password-toggle"
					@click="showPassword = !showPassword">{{ showPassword ? '隐藏' : '显示' }}</text>
			</view>

			<!-- 记住密码（仅密码登录时显示） -->
			<view v-if="loginType === 'password'" class="remember-pwd">
				<checkbox-group @change="toggleRemember">
					<checkbox :checked="rememberPassword" /> 记住密码
				</checkbox-group>
				<text class="forgot-pwd" @click="navigateToForgot">忘记密码？</text>
			</view>

			<button class="login-btn" :disabled="!formValid" @click="handleLogin">立即登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginType: 'code', // 登录类型 code/password
				phone: '', // 手机号
				code: '', // 验证码
				password: '', // 密码
				showPassword: false, // 显示密码明文
				rememberPassword: false, // 记住密码
				codeBtnText: '获取验证码', // 验证码按钮文字
				canGetCode: true, // 能否获取验证码
				countdown: 60 // 倒计时
			}
		},
		computed: {
			// 手机号验证
			phoneValid() {
				return /^1[3-9]\d{9}$/.test(this.phone)
			},
			// 表单整体有效性
			formValid() {
				if (!this.phoneValid) return false
				if (this.loginType === 'code') {
					return this.code.length === 6
				}
				return this.password.length >= 6 && this.password.length <= 20
			},
			// 错误提示
			phoneError() {
				if (!this.phone) return '手机号不能为空'
				if (!this.phoneValid) return '手机号格式不正确'
				return ''
			}
		},
		methods: {
			// 切换登录方式
			switchLoginType(type) {
				this.loginType = type
				// 清除非当前登录方式的输入
				if (type === 'code') this.password = ''
				else this.code = ''
			},

			// 获取短信验证码
			async getSMSCode() {
				if (!this.canGetCode || !this.phoneValid) return

				try {
					this.canGetCode = false
					// 调用后端API发送验证码
					const res = await uni.request({
						url: 'upms/sms_send/send/single/verifyCode',
						method: 'POST',
						data: {
							phone: this.phone,
							codeType: 'LOGIN'
						}
					})
					if (res.code == 200) {
						// 启动倒计时
						this.startCountdown()
						uni.showToast({
							title: '验证码已发送'
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: '发送失败，请重试',
						icon: 'none'
					})
					this.canGetCode = true
				}
			},

			// 倒计时处理
			startCountdown() {
				this.countdown = 60
				const timer = setInterval(() => {
					if (this.countdown <= 0) {
						clearInterval(timer)
						this.codeBtnText = '重新获取'
						this.canGetCode = true
					} else {
						this.codeBtnText = `${this.countdown}s后重试`
						this.countdown--
					}
				}, 1000)
			},

			// 登录提交
			async handleLogin() {
				if (!this.formValid) return

				const params = {
					phone: this.phone,
					[this.loginType === 'code' ? 'code' : 'password']: this.loginType === 'code' ? this.code : this
						.password
				}

				try {
					const res = await uni.request({
						url: '/api/login',
						method: 'POST',
						data: params
					})

					// 处理登录成功逻辑
					uni.setStorageSync('token', res.data.token)
					uni.showToast({
						title: '登录成功'
					})
					uni.navigateBack()

					// 记住密码处理
					if (this.rememberPassword) {
						uni.setStorageSync('savedPhone', this.phone)
						uni.setStorageSync('savedPassword', this.password)
					}
				} catch (error) {
					uni.showToast({
						title: error.message || '登录失败',
						icon: 'none'
					})
				}
			},

			// 其他辅助方法
			toggleRemember(e) {
				this.rememberPassword = e.detail.value.length > 0
			},
			navigateToForgot() {
				uni.navigateTo({
					url: '/pages/forgot-password/forgot-password'
				})
			}
		},
		onLoad() {
			// 初始化记住的密码
			const savedPhone = uni.getStorageSync('savedPhone')
			const savedPassword = uni.getStorageSync('savedPassword')
			if (savedPhone && savedPassword) {
				this.phone = savedPhone
				this.password = savedPassword
				this.rememberPassword = true
			}
		}
	}
</script>

<style scoped>
	/* 修改原有容器样式 */
	.login-container {
		padding: 40rpx;
		background-color: rgba(255, 255, 255, 0.9);
		/* 半透明白色背景 */
		border-radius: 32rpx;
		margin: 0rpx 40rpx 0;
		/* 上间距60rpx，左右40rpx */
		position: relative;
	}

	.tab-bar {
		display: flex;
		margin-bottom: 60rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		color: #666;
		padding: 20rpx 0;
		border-bottom: 4rpx solid transparent;
	}

	.tab-item.active {
		color: #007AFF;
		border-bottom-color: #007AFF;
	}

	.input-group {
		position: relative;
		margin-bottom: 40rpx;
		border-bottom: 1rpx solid #eee;
		padding: 20rpx 0;
	}

	.get-code-btn {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		color: #007AFF;
		font-size: 28rpx;
	}

	.get-code-btn.disabled {
		color: #999;
	}

	.password-toggle {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		color: #666;
	}

	.remember-pwd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
	}

	.login-btn {
		margin-top: 60rpx;
		background: #007AFF;
		color: white;
		border-radius: 50rpx;
	}

	.login-btn[disabled] {
		background: #ccc;
	}

	.error-msg {
		color: red;
		font-size: 24rpx;
		margin-top: 10rpx;
		display: block;
	}

	.login_bg {
		width: 100vw;
	}
</style>